<template>
    <el-button :size="size" :type="type" :icon="icon" :loading="loading" :disabled="!hasPerms(perms)"
        @click="handleClick">
        {{ label }}
    </el-button>
</template>
<script setup lang="ts">
import { hasPermission } from "@/utils/permission";
const props = defineProps({
    size: {  // 按钮尺寸
        type: String,
        default: ''
    },
    type: {  // 按钮类型
        type: String,
        default: null
    },
    icon: {  // 按钮显示图标
        type: String,
        default: ''
    },
    loading: {  // 按钮加载标识
        type: Boolean,
        default: false
    },
    disabled: {  // 按钮是否禁用
        type: Boolean,
        default: false
    },
    label: {  // 按钮显示文本
        type: String,
        default: 'Button'
    },
    perms: {  // 按钮权限标识，外部使用者传入
        type: String,
        default: null
    }
});
const emit = defineEmits(['click']);
//点击处理事件
const handleClick = () => {
    emit('click', {});
}
//权限判断是否禁用
const hasPerms = (perms: any) => {
    const disableds: boolean = props.disabled;
    return hasPermission(perms) && !disableds;
}
</script>